<script setup lang="ts">
import QuestionItemComponent from './question-item.vue';
import type { QuestionItem } from '#/types/question';

interface Props {
  questions: QuestionItem[];
  currentQuestionId?: number;
}

const props = withDefaults(defineProps<Props>(), {
  currentQuestionId: 1
});

const emit = defineEmits<{
  questionSelect: [question: QuestionItem];
}>();

// 处理题目选择
const handleQuestionSelect = (question: QuestionItem) => {
  emit('questionSelect', question);
};
</script>

<template>
  <div class="question-navigation">
    <h3 class="text-sm font-medium mb-3">{{ $t('examCore.questionNavigation') }}</h3>
    <div class="question-grid">
      <QuestionItemComponent
        v-for="question in questions"
        :key="question.id"
        :question="question"
        :class="{ 'ring-2 ring-blue-500': question.id === currentQuestionId }"
        @click="handleQuestionSelect"
      />
    </div>
  </div>
</template>

<style scoped>
@import './question-status.css';

.question-navigation {
  @apply p-4 bg-gray-50 rounded-lg;
}
</style> 
